<template>
	<section>
		<!-- header -->
		<header class="l-header">
			<router-link to='/home'><img src="static/jiudianimg/8gsomz20aqwivp8ilr2i4novhy9kbkcp.png" class="img_1"></router-link>
			<p>
				酒店
			</p>	
			<div class="top">
				<router-link to='/home'><img src="static/jiudianimg/ifady3t4clv00n2sdl5gyqkw3nwzk4zb.png"></router-link>
				<a href="javascript:void(0)"><img src="static/jiudianimg/r4oobsua7kkwer1ska00nu9tr2etkwpl.png"></a>
			</div>
		</header>
		<!-- l-swiper -->	
		<div class="l-swiper">
			<!-- <a href="javascript:void(0)"><img src="/static/jiudianimg/1499750492_16040.jpg"></a> -->
			
			<swiper :options="swiperOption" ref="mySwiperA">
	  			<!-- 幻灯内容 -->
	  			<swiper-slide><img src="static/jiudianimg/1499750492_16040.jpg"></swiper-slide>
	  			<swiper-slide><img src="static/jiudianimg/1500276086_48623.jpg"></swiper-slide>
	  			<swiper-slide><img src="static/jiudianimg/1502776036_86271.jpg"></swiper-slide>
	  			<swiper-slide><img src="static/jiudianimg/1502777320_94110.jpg"></swiper-slide>
	  		
	  			<!-- 以下控件元素均为可选 -->
	  			<div class="swiper-pagination" slot="pagination"></div>
	  			<!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
	  			<!-- <div class="swiper-button-next" slot="button-next"></div> -->
	  			<div class="swiper-scrollbar"  slot="scrollbar"></div>
	  		</swiper>
			
		</div>
		<!-- hotel_tab -->
		<ul class="l-hotel_tab">
			<li :class="bg1" v-on:click='clicka'><span>国内酒店</span></li>
			<li v-on:click='clickb' :class="bg2"><span>国际酒店</span></li>
		</ul>
		<!-- l-search -->
		<div class="l-search">
			<div class="l-location">
				<a href="javascript:void(0)" class="l-l-loc" v-show='show'>
					<em>目的地</em><span class="l-span">上海</span>
				</a>
				<a href="javascript:void(0)" class="l-l-loc_guoji" v-show='hidden'>
					<em>目的地</em><span class="l-mangu">曼谷</span>
				</a>
				<!-- <p class="p"><img src="/static/jiudianimg/dw.png">我的位置</p> -->
			</div>		
			<a href="javascript:void(0)" class="l-time">
				<div class="l-date">
					<p>日期<p>
					<div class="days">
						<p>8月20日<i>明天</i><b>入住</b></p>
						<p>8月21日<i>后天</i><b>入住</b></p>

					</div>
					<span>共一晚</span>
				</div>
			</a>		
			<a href="javascript:void(0)" class="font">
				关键字/位置/酒店名
			</a>
			<a href="javascript:void(0)" class="star">
				选择价格/星级
			</a>
			<a href="javascript:void(0)" class="button">
				<p>查询</p>
			</a>
			<span class="wei"><img src="static/jiudianimg/map.png"></span>
		</div>
		<!-- gray -->
		<div class="gray"></div>
		<!-- history -->
		<div class="history">
			<span class="l-his"><a href="javascript:void(0)">历史收藏</a></span>
			<span><a href="javascript:void(0)">酒店订票</a></span>
		</div>
		<!-- hotel_pic -->
		<div class="hotel_pic">
			<a href="javascript:void(0)" class="laohong"></a>
			<a href="javascript:void(0)" class="wai"></a>
		</div>
		<!-- l-sell -->
		<div class="l-sell">
			<div class="l-sell_title">
				<p></p><span>销量排行</span><i>每周更新</i><a href="javascript:void(0)"><b>查看排行</b></a>
			</div>
			<div v-for='i in list'>
				<a href="javascript:void(0)" class="l-pic">
					<img v-lazy="i.images">
					<p class="l-sell_price">
						￥
						<i>{{i.Price}}</i>
						<span>起/间</span>
					</p>
					<h3>{{i.name}}</h3>
				</a>
			</div>
		</div>
	</section>
</template>

<script type="text/javascript">
	export default{
		data(){
			return{
				show:true,
				hidden:false,
				bg1:"fff",
				bg2:"",
				list:[],
				swiperOption: {
					// 所有配置均为可选（同Swiper配置） 
					autoplay: 2000,
					setWrapperSize :true,
					pagination : '.swiper-pagination',
					paginationClickable :true,
					autoplayDisableOnInteraction:false,
					// prevButton:'.swiper-button-prev',
					// nextButton:'.swiper-button-next',
					// scrollbar:'.swiper-scrollbar',
					mousewheelControl : true,
					observeParents:true,
					loop:true
				}
			}
		},
		methods:{
			clicka(){
				this.show=true;
				this.hidden=false;
				this.bg1="fff";
				this.bg2="";
			},
			clickb(){
				this.show=false;
				this.hidden=true;
				this.bg1="";
				this.bg2="fff";
			},
			request(i){
			this.$http.get("./static/lvmamahotel.json")
            	.then(function(res){
					this.list=res.body;
           		 })
			}
		},
		mounted(){
			this.request();
			document.body.scrollTop=0;	
		},
		computed:{

		}
	}
</script>

<style scoped>
/*header*/
.l-header{
	height: 1.1333rem;
	width: 100%;
	font-size: 0.472222rem;
	background:#fff;
	opacity: 1;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: fixed;	
	top: 0;
	left: 0;
	z-index: 1000;
}
.l-header .img_1{
	margin-left: 0.347222rem;
}
.l-header .top{
	margin-right: 0.208333rem;
	display: flex;
	flex-direction: row;
	width: 14%;
	justify-content: space-between;
	align-items: center;
}
/*swiper*/
.l-swiper{
	margin: 1.1333rem 0 0 0;
	height: 4.472222rem;
	width: 100%;
	overflow: hidden;
}
.l-swiper img{
	width: 100%;
	display: block;
}
/*hotel_tab*/
.l-hotel_tab{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	font-size: 0.361111rem;
	height: 1.16rem;
	width: 100%;
	border-bottom: 1px solid #dadada;
}
.l-hotel_tab li{
	text-align: center;
	width: 25%;
	height: 1.093333rem;
	line-height: 1.093333rem;
}
.l-bg1{
	color: #c3056f;
	border-bottom: 4px solid #c3056f;
}
/*l-search*/
.l-search{
	height: 7.263889rem ;
	width: 92%;
	margin: 0 auto;
}
.l-search .l-location{
	height: 1.375rem;
	line-height:  1.375rem;
	width: 100%;
	
	position: relative;
	border-bottom: 1px solid #dadada;
}
.l-search .l-location .l-l-loc{
	position: relative;
	display: inline-block;
	width: 82%;
	/*border-bottom: 1px solid #dadada;*/
}

.l-search .l-location .l-l-loc{
	width: 75%;
	display: inline-block;
	/*border-bottom: 1px solid #dadada;*/
}
.l-search .l-location .l-l-loc .l-mangu{
	width: 75%;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}
.l-search .l-location .l-l-loc em{
	font-style: normal;
	display: inline-block;
	font-size: 0.305556rem;
	color: #585858;
}
.l-search .l-location .l-l-loc_guoji em{
	font-style: normal;
	display: inline-block;
	font-size: 0.305556rem;
	color: #585858;
}
.l-search .l-location .l-l-loc span{
	font-size: 0.416667rem;
	margin: 0 0 0 7%;
}
.l-search .l-location .l-l-loc_guoji span{
	font-size: 0.416667rem;
	margin: 0 0 0 7%;
}
.l-search .l-location .p{
	font-style: normal;
	float: right;
	position: absolute;
	top:0.208333rem;
	right: 0;
	height: 0.88rem;
	line-height: 0.88rem;
	width: 1.34rem;
	/*margin: 0 0 0 5%;*/
	color: #b35675;
}
.l-search .l-location .p img{
	margin: 3% auto 0 28%;
}
.l-time{
	display: inline-block;
	height: 1.930556rem;
	width: 100%;
	border-bottom: 1px solid #dadada;
}
.l-time .l-date{
	height: 1.902778rem;
	width: 100%;
	margin: 0.361111rem 0 0 0;
	line-height: 1.902778rem;
	/*background:red;*/
	/*font-size: 0.277778rem;*/
}
.l-time .l-date p{
	font-style: normal;
	/*display: inline-block;*/	
	font-size: 0.305556rem;
	color: #585858;
	height: 1.5rem;
	line-height: 1.5rem;
	float: left;
}
.l-time .l-date .days{
	margin: -0.069444rem 0 0 10%;
	display: flex;
	flex-direction: column;
	float: left;
}
.l-time .l-date .days p{
	font-size: 0.416667rem;
	height: 0.816667rem;
	line-height: 0.816667rem;
}
.l-time .l-date .days i{
	font-size: 0.305556rem;
	font-style: normal;
	margin:0 0.277778rem 0 0.625rem;
}
.l-time .l-date .days b{
	font-weight: normal;
	font-size: 0.305556rem;
}
.l-time .l-date span{
	font-size: 0.361111rem;
	float: left;
	margin: -0.217778rem 0 0 0.861111rem;
}
.font{
	display: inline-block;
	height: 1.208333rem;
	width: 100%;
	border-bottom: 1px solid #dadada;
	color: #bcbcbc;
	font-style: normal;
	line-height: 1.208333rem;
	font-size: 0.361111rem;
}
.star{
	display: inline-block;
	height: 1.208333rem;
	width: 100%;
	border-bottom: 1px solid #dadada;
	font-size: 0.361111rem;
	color: #bcbcbc;
	font-style: normal;
	line-height: 1.208333rem;	
}
.button{
	display: inline-block;
	height: 1.055556rem;
	width: 75%;
	background:#d10672;
	border-radius: 0.138889rem;
	margin: 0.416667rem 0;
	line-height: 1.055556rem;
	text-align: center;
	color: #fff;
	font-style: normal;
	font-size: 0.444444rem;
	float: left;
}
.button p{
	background:url(../../../static/jiudianimg/cha.png)39% center no-repeat;
}
.l-search .wei{
	margin: 0.555556rem 0 0 8%;
	display: inline-block;
}
/*gray*/
.gray{
	height: 0.277778rem;
	width: 100%;
	background:#eceff4;
	margin: 0.416667rem 0 0 0 ;
}
/*history*/
.history{
	font-size: 0.333333rem;
	height: 1.444444rem;
	line-height: 1.444444rem;
	width: 100%;
	font-style: normal;
	text-align: center;
	display: flex;
	align-items: center;	
}
.history span{
	height: 0.972222rem;
	line-height: 0.972222rem;
	width: 50%;
	border-right: 2px solid #dcdcdc;
}
/*hotel_pic*/
.hotel_pic{
	height: 2.916667rem;
	width: 100%;
	background:#eceff6;
	font-style: normal;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
.hotel_pic .laohong{
	height: 2.277778rem;
	width: 45%;
	background:url(../../../static/jiudianimg/1479984022_56414.jpg);
	background-size: 100% 100%;
}
.hotel_pic .wai{
	height: 2.277778rem;
	width: 45%;
	background:url(../../../static/jiudianimg/1480400678_72617.jpg);
	background-size: 100% 100%;
}
/*l-sell*/
.l-sell .l-sell_title{
	
	font-style: normal;
	font-size: 0.416667rem;
	height: 1.25rem;
	line-height: 1.25rem;
	width: 95%;
	margin: 0 auto;
}
.l-sell .l-sell_title p{
	height: 0.452222rem;
	width: 0.555556rem;
	background-image: url(../../../static/jiudianimg/totSprite.png);
	background-position: -270px -1112px;
	float: left;
	margin: 0.388889rem 2% 0 0 ;
}
.l-sell .l-sell_title i{
	font-style: normal;
	margin: 0 0 0 0.138889rem;
	font-size: 0.305556rem;
}
.l-sell .l-sell_title b{
	font-style: normal;
	float: right;
	font-weight: normal;
	font-size: 0.305556rem;
	color: #b7477f;
}
.l-sell .l-pic {
	display: inline-block;
	height: 3.416667rem;
	width: 96%;
	/*background:url(/static/jiudianimg/6edd5d70-fa74-4d91-8d21-81dc28955480_480_320.jpg)no-repeat center left;*/
	background-size: 100% 100%;
	margin: 0 2% 0.277778rem 2%;
	position: relative;
	color: #fff;
}
.l-sell .l-pic img{
	height: 3.416667rem;
	width: 98%;
}
.l-sell .l-pic p{
	height: 0.972222rem;
	line-height: 0.972222rem;
	font-style: normal;
	width: 27%;
	background:rgba(0,0,0,.7);
	position: absolute;
	top: 1.222222rem;
	left: 0;
}
.l-sell .l-pic p i{
	font-style: normal;
	font-size: 0.361111rem;
}
.l-sell .l-pic h3{
	position: absolute;
	bottom: 0;
	left: 0;
	height: 0.833333rem;
	width: 62%;
	line-height: 0.833333rem;
	font-style: normal;
	font-weight: normal;
	font-size: 0.416667rem;
	color: #fff;
	margin: 0 0 0 3%;
	text-overflow:ellipsis; 
	overflow:hidden; 
	white-space:nowrap;
}
.l-sell .l-pic img[lazy=loading] {
    transform: scale(1.2,1.2);
  }
.l-sell .l-pic img[lazy=loaded] {
    transform: scale(1,1.0);
    transition: transform 1.5s;
  }


</style>